CONSOLE-4782: Group Impersonation Modal #15571
Conversation
Add modal component for multi-group user impersonation: - TypeScript React component with group selection - Multi-select group input with search/filter - Chip display for selected groups - Form validation for username - Internationalization support
openshift-ci-robot
added
the
jira/valid-reference
|
@Leo6Leo: This pull request references CONSOLE-4782 which is a valid jira issue. Warning: The referenced jira issue has an invalid target version for the target branch this PR targets: expected the sub-task to target the "4.21.0" version, but no target version was set. In response to this:
Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository. |
|
[APPROVALNOTIFIER] This PR is NOT APPROVED This pull-request has been approved by: Leo6Leo The full list of commands accepted by this bot can be found here.
Needs approval from an approver in each of these files:
Approvers can indicate their approval by writing |
openshift-ci
bot
added
the
kind/i18n
|
@Leo6Leo: The following tests failed, say
Full PR test history. Your PR dashboard. Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository. I understand the commands that are listed here. |
| @@ -0,0 +1,357 @@ | |||
| import * as React from 'react'; | |||
There was a problem hiding this comment.
avoid the react namespace import in new code
| } from '@patternfly/react-core'; | ||
| import { HelpIcon } from '@patternfly/react-icons/dist/esm/icons/help-icon'; | ||
| import { TimesIcon } from '@patternfly/react-icons/dist/esm/icons/times-icon'; | ||
| import { Modal, ModalVariant } from '@patternfly/react-core/deprecated'; |
There was a problem hiding this comment.
avoid deprecated components in new code
| const [showAllGroups, setShowAllGroups] = React.useState(false); | ||
| const [groupSearchFilter, setGroupSearchFilter] = React.useState(''); | ||
|
|
||
| // Mock group options - in real implementation, these would come from API |
There was a problem hiding this comment.
To be honest if we have to mock API in order for this PR to work I would put WIP in the title
| type="button" | ||
| aria-label={t('public~More info for username field')} | ||
| onClick={(e) => e.preventDefault()} | ||
| style={{ |
There was a problem hiding this comment.
inline styles to this extent are discouraged, try to find a pf component which solves your problem
| type="button" | ||
| aria-label={t('public~More info for groups field')} | ||
| onClick={(e) => e.preventDefault()} | ||
| style={{ |
| onSelect={handleGroupSelect} | ||
| toggle={toggle} | ||
| isScrollable | ||
| maxMenuHeight="300px" |
There was a problem hiding this comment.
this possibly causes issues with small height screens so add that to testing
| isScrollable | ||
| maxMenuHeight="300px" | ||
| > | ||
| <SelectList id="select-typeahead-listbox"> |
There was a problem hiding this comment.
use a less generic id name here
Description
Add modal component for multi-group user impersonation: